import { StyleSheet, Image, Platform, View, ScrollView } from 'react-native';
import { Icon, Input, IconElement, Card, TopNavigation, Button, TopNavigationAction, Text, Calendar, Layout, I18nConfig, NativeDateService } from '@ui-kitten/components';
import React from 'react'
import Swiper from 'react-native-swiper';
const tabs = [
  { text: '全部', key: 'all' },
  { text: '分区一', key: '1' },
  { text: '分区二', key: '2' },
  { text: '分区三', key: '3' },
]
export default function DemoScreen() {
  const [value, setValue] = React.useState('');
  const [tab, setTab] = React.useState('all');
  return <>
    <TopNavigation alignment='center' title="我的练习进度" />
    <>
      <View style={{ backgroundColor: '#fff', padding: 10 }}>
        <Input
          style={{ borderRadius: 200, backgroundColor: '#D8D8D8', height: 32 }}
          value={value}
          label=''
          placeholder='输入搜索内容'
          accessoryLeft={(props) => <Icon
            {...props}
            name={'search'}
          />}
          onChangeText={nextValue => setValue(nextValue)}
        />
      </View>
      <View style={{ height: 150 }}>
        <Swiper
          style={styles.swiperStyle}
          // 这个很重要，解决白屏问题
          removeClippedSubviews={false}
          // 切换时间，单位秒
          autoplayTimeout={5}
          // 是否自动轮播
          autoplay={true}
          // 如果为true，滚动方向是横向的，如果为false,滚动方向是纵向的，
          horizontal={true}
          paginationStyle={{ bottom: 0 }}
          dot={<View style={[styles.dotStyle, styles.dotCommonStyle]} />}
          activeDot={<View style={[styles.activeDotStyle, styles.dotCommonStyle]} />}
        >
          {
            [1, 2].map((el, index) => <Layout key={index} style={styles.bannerStyle}>
              <Text>广告图</Text>
            </Layout>)
          }
        </Swiper>
      </View>
      <View style={{ marginTop: 10 }}>
        <ScrollView horizontal>
          {
            tabs.map((el, index) => <Text key={index} onPress={() => setTab(el.key)} style={{ ...styles.tabs, fontWeight: el.key === tab ? 700 : 400, color: el.key === tab ? '#000' : '#666' }}>{el.text}</Text>)
          }
        </ScrollView>
      </View>
      <ScrollView>
        <View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', flex: 1, overflow: 'scroll' }}>
          {
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((el, index) => <Card key={index} style={{ width: '43%', marginTop: 10, marginHorizontal: 10 }}>
              <View style={{ marginHorizontal: -14, marginVertical: -6 }}>
                <View style={{ height: 124, backgroundColor: '#D8D8D8', borderRadius: 4, marginBottom: 5 }}></View>
                <View><Text style={{ textAlign: 'center' }}>测试名称XXXXXXXX</Text></View>
                <Text style={{ textAlign: 'center', color: '#007AFF', fontSize: 14, marginTop: 5 }}>开始测试</Text>

              </View>
            </Card>)
          }
        </View>
      </ScrollView>
    </>
  </>
}

const styles = StyleSheet.create({
  tabs: {
    padding: 5,
    paddingHorizontal: 20,
    borderRadius: 30,
    margin: 10,
    marginVertical: 0,
    backgroundColor: '#ffffff',
    fontSize: 18,
    height: 36
  },
  activeTab: {
    fontWeight: 600
  },
  swiperStyle: {
    height: 150,
  },
  bannerStyle: {
    borderRadius: 8,
    backgroundColor: '#fff',
    flexDirection: 'row',
    margin: 10,
    height: 150,
  },
  dotStyle: {
    width: 0,
    backgroundColor: '#0F0F0F4D',
  },
  activeDotStyle: {
    width: 0,
    backgroundColor: '#0f0f0f',
  },
  dotCommonStyle: {
    borderRadius: 8,
    marginLeft: 5,
    height: 0,
  },
});
